<template>
  <!-- 经纪人管理 -->
  <div class="box">
    <div class="zbc" v-if="zbc">
      <div class="fenpei">
        <div class="zbc_box">
          <div class="list">
            <div class="li" style="display: flex" v-for="(item, index) in fenpagentList" :key="index"
              v-if="fenpagentList.length > 0">
              <div v-if="!item.choose" style="
                  font-size: 50px;
                  line-height: 129px;
                  color: #d1d1d1;
                  margin-right: 10px;
                  cursor: pointer;
                " @click="choosehouse3(item.id)">
                ○
              </div>
              <p v-else class="el-icon-success" style="
                  font-size: 30px;
                  line-height: 129px;
                  color: #64b6a8;
                  margin-right: 10px;
                  cursor: pointer;
                " @click="choosehouse3(item.id)"></p>
              <div class="kuang" :style="'width:' + 500 + 'px;'">
                <img class="touxiang" :src="item.userImage || defaultAvatar" />
                <div class="name">{{ item.userName }}</div>
                <div class="pingjia">
                  <img v-for="(item1, index) in Number(item.scoreAvg)" :key="index" src="../../assets/xin_liang.png" />
                  <img v-for="(item1, index) in 5 - item.scoreAvg" :key="index" src="../../assets/xin_hui.png" />
                </div>
              </div>
            </div>
            <el-empty description="没有在职经纪人" v-if="fenpagentList.length == 0"></el-empty>
          </div>
        </div>
        <div class="but">
          <div class="d1" @click="quxiao">取消</div>
          <div class="d2" @click="queding">确定</div>
        </div>
      </div>
    </div>
    <heads></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="7"></ceList>
      <div class="con" v-if="del">
        <div>
          <div class="leibie" v-if="agenttotal > 0">
            <span @click="binaji">{{ checkboxShow ? "完成" : "管理" }}</span>
          </div>
          <div class="list">
            <div class="li" style="display: flex" v-for="(item, index) in agentList" :key="'t' + index"
              v-if="agenttotal > 0">
              <!-- <el-checkbox v-if="checkboxShow"></el-checkbox> -->
              <template v-if="checkboxShow">
                <div v-if="!item.choose" style="
                    font-size: 50px;
                    line-height: 129px;
                    color: #d1d1d1;
                    margin-right: 10px;
                    cursor: pointer;
                  " @click="choosehouse(item.id)">
                  ○
                </div>
                <p v-else class="el-icon-success" style="
                    font-size: 30px;
                    line-height: 129px;
                    color: #64b6a8;
                    margin-right: 10px;
                    cursor: pointer;
                  " @click="choosehouse(item.id)"></p>
              </template>
              <!--  @click="fenpei(item)" -->
              <div class="kuang" :style="'width:' + 790 + 'px;'" @click="details(item.userId, item.id, item)">
                <img class="touxiang" :src="item.userImage || defaultAvatar" />
                <div class="name">{{ item.userName }}</div>
                <div class="pingjia">
                  <img v-for="(item1, index) in Number(item.scoreAvg)" :key="index" src="../../assets/xin_liang.png" />
                  <img v-for="(item1, index) in 5 - item.scoreAvg" :key="index" src="../../assets/xin_hui.png" />
                </div>
                <div class="biao" v-if="item.status == 0">待审核</div>
                <div class="biao2" v-if="item.status == 2">待平台审核</div>
                <div class="biao2" style="background-color: red !important; color: white" v-if="item.status == 3">已拒绝
                </div>

                <div class="biao" v-if="item.dutyStatus == 1 && item.status == 1">
                  在职
                </div>
                <!-- <div
                  class="biao"
                  v-if="item.dutyStatus == 1 "
                >
                  在职
                </div> -->
                <div class="biao1" v-if="item.confirmDuty == 2">离职</div>
                <div class="biao2" v-if="item.confirmDuty == 1">离职待确认</div>
              </div>
            </div>
            <el-empty description="没有经纪人" v-if="agenttotal == 0"></el-empty>
            <div class="fenye">
              <el-pagination background layout="prev, pager, next" :total="agenttotal" :page-size="agentpage.pageSize"
                :current-page="agentpage.PageNo" @current-change="agentCurrentChange"></el-pagination>
            </div>
          </div>
          <div class="caozuo" v-if="checkboxShow">
            <!-- <el-checkbox v-if="checkboxShow" style="margin-top: 25px;margin-left: 15px;"></el-checkbox> -->
            <!-- <span class="shan">全选</span> -->
            <div class="anniu" v-if="isShow">
              <!-- <div class="d1" style="margin-right: 20px">删除</div> -->
              <div class="d2" @click="audit">审核</div>
            </div>
            <div class="anniu" v-if="isShowDel">
              <!-- <div class="d1" style="margin-right: 20px">删除</div> -->
              <div class="d2" @click="delJJR">删除</div>
            </div>
            <div class="anniu" v-if="isShowMark">
              <!-- <div class="d1" style="margin-right: 20px">删除</div> -->
              <div class="d2" @click="departure()">标记为离职</div>
            </div>
          </div>
        </div>
      </div>
      <div class="con con1" v-if="!del">
        <div>
          <div class="li1">
            <div class="kuang" :style="'width:' + 938 + 'px;'">
              <img class="touxiang" :src="agent.userImage || defaultAvatar" />
              <div class="name">{{ agent.userName }}</div>
              <div class="pingjia">
                <img v-for="(item1, index) in Number(agent.scoreAvg)" :key="index" src="../../assets/xin_liang.png" />
                <img v-for="(item1, index) in 5 - agent.scoreAvg" :key="index" src="../../assets/xin_hui.png" />
              </div>
            </div>
          </div>
          <div class="kuang1">
            <div class="leibie">
              <div class="anniu">
                <div :class="leibie == 0 ? 'xuan' : ''" @click="leibieClick(0)">
                  全部
                </div>
                <div :class="leibie == 1 ? 'xuan' : ''" @click="leibieClick(1)">
                  二手房
                </div>
                <div :class="leibie == 2 ? 'xuan' : ''" @click="leibieClick(2)">
                  新房
                </div>
                <div :class="leibie == 3 ? 'xuan' : ''" @click="leibieClick(3)">
                  出租房
                </div>
              </div>
              <div class="fanhui" @click="del = !del">返回</div>
            </div>
            <div class="list">
              <div class="list2">
                <div class="li" style="display: flex" v-for="(item, index) in houseList" :key="'a' + index"
                  v-if="housetotal > 0">

                  <template>
                    <div v-if="!item.choose" style="
                        font-size: 50px;
                        line-height: 154px;
                        color: #d1d1d1;
                        margin-right: 10px;
                        cursor: pointer;
                      " @click="choosehouse(item.id)">
                      ○
                    </div>
                    <p v-else class="el-icon-success" style="
                        font-size: 30px;
                        line-height: 154px;
                        color: #64b6a8;
                        margin-right: 10px;
                        cursor: pointer;
                      " @click="choosehouse(item.id)"></p>
                  </template>
                  <img class="img" :src="$img + item.houseImageDiv" />
                  <div class="wenzi">
                    <p class="p1">
                      {{ item.title }}
                    </p>
                    <p class="p2">{{ item.region }} {{ item.address }}</p>
                    <p class="p3">
                      <span>{{ item.house_type }}</span>
                      <span>{{ item.AREA }}㎡</span>
                      <span>{{ item.floor }}</span>
                    </p>
                    <p class="p4">
                      <img :src="agent.userImage" />
                      <span style="margin-left: 7px">{{ agent.userName }}</span>
                      <!-- <span class="gong">{{item.shop_name}}</span> -->
                    </p>
                  </div>
                  <div class="jiage">
                    <p class="p1" v-if="item.transaction_type == 1">
                      {{ item.price }}元
                    </p>
                    <p class="p1" v-if="item.transaction_type == 2">
                      {{ item.price }}万
                    </p>
                    <p class="p2" v-if="item.transaction_type == 2">
                      均价：{{
                        ((item.price * 10000) / item.area).toFixed(2)
                      }}元/㎡
                    </p>
                  </div>
                </div>
                <div class="li" v-if="housetotal == 0" style="width: 100%; height: 400px">
                  <el-empty description="该经纪人没有待分配房源" v-if="leibie == 0"></el-empty>
                  <el-empty description="该经纪人没有待分配二手房" v-if="leibie == 1"></el-empty>
                  <el-empty description="该经纪人没有待分配新房" v-if="leibie == 2"></el-empty>
                  <el-empty description="该经纪人没有待分配出租房" v-if="leibie == 3"></el-empty>
                </div>
              </div>
            </div>
            <div class="fenye">
              <el-pagination background layout="prev, pager, next" :total="housetotal" :current-page="housepage.pageNo"
                :page-size="housepage.pageSize" @current-change="houseCurrentChange"></el-pagination>
            </div>
          </div>
          <div class="caozuo">
            <el-checkbox style="margin-top: 25px; margin-left: 15px" v-model="select" @change="selectColl"></el-checkbox>
            <span class="shan">{{ select ? "取消全选" : "全选" }}</span>
            <div class="anniu">
              <div class="d2" style="background-color: red" @click="fenpeiren">
                分配
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <floor></floor>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import ceList from "../../components/ceList";
import { Message } from "element-ui";
import titlesearch from "../../components/titlesearch.vue";
export default {
  components: {
    floor,
    heads,
    ceList,
    titlesearch,
  },
  data() {
    return {
      curAgent: {},


      select: false,
      zbc: false,
      shouyeShow: false,
      shangjiaShow: false,
      xuan: 7,
      leibie: 0,
      radioCities: [],
      checkboxShow: false,
      del: true,
      rew: "",
      user: {},
      agentpage: {
        pageSize: 10,
        pageNo: 1,
        shopId: "",
      },
      agentList: [],
      agenttotal: 0,
      agent: {}, //点击标记离职的经纪人
      housepage: {
        pageNo: 1,
        pageSize: 3,
        userId: "",
        shopId: "",
        examineStatus: "2",
      },
      houseList: [],
      housetotal: 0,
      fenpagentList: [],
      isShow: false,//1 标记离职  2 删除  3审核
      isShowDel: false,//2 删除
      isShowMark: false,//1 标记离职
    };
  },
  created() {
    this.getUser();
  },

  computed: {

  },
  methods: {
    details(userId, id, item) {
      if (item.dutyStatus == 2) {
        this.myErrorMessage("该经纪人已离职，无法查看！")

        return
      }
      if (item.status == 3) {
        this.myErrorMessage("该经纪人已拒绝，无法查看！")

        return
      }
      // if(item.status == 0){
      // 待审核
      // 	this.activeData = item
      // 	this.isShowCCPOPUP = true
      // 	return
      // }


      this.openUrl({
        path: "/index/goldConsultant",
        query: {
          id: userId
        }
      });
    },
    isShows() {

      var arr = this.agentList.filter((item) => {
        return item.choose == true
      })
      console.log(arr, arr[0].status == '0')
      // if(arr.length==1&&arr[0].status=='0'){//待审核
      //   this.isShow = true
      // } else if(arr.length==1&&arr[0].status=='1' && arr[0].confirmDuty=='0'&& arr[0].dutyStatus=='1'){//正常在职的才能标记离职
      //   this.isShow = true
      // } else if(arr.length==1&&arr[0].status=='1' && arr[0].confirmDuty=='2'&& arr[0].dutyStatus=='2'){//离职的才能删除
      //   this.isShow = true
      // } else{
      //   this.isShow = false
      // }
      if (arr.length == 1 && arr[0].dutyStatus == '2') {//离职的才能删除
        this.isShowDel = true
        this.isShow = false
        this.isShowMark = false
      } else if (arr.length == 1 && arr[0].status == '1' && arr[0].confirmDuty == '0' && arr[0].dutyStatus == '1') {//正常在职的才能标记离职
        this.isShowMark = true
        this.isShow = false
        this.isShowDel = false
      } else if (arr.length == 1 && arr[0].status == '0') {//待审核
        this.isShow = true
        this.isShowMark = false
        this.isShowDel = false
      } else {
        this.isShow = false
        this.isShowMark = false
        this.isShowDel = false
      }
    },
    audit() {
      var item = this.curAgent
      console.log(this.curAgent)
      //  return
      if (item.status == '0') {
        let data = {
          shopName: item.shopName,
          shopId: item.shopId,
          userId: item.userId,
          examineStatus: 0,
          remark: '',

        }

        this.$confirm(item.userName + '申请认证', '提示', {
          confirmButtonText: '同意',
          cancelButtonText: '拒绝',
        }).then(() => {
          delete data.remark
          data.examineStatus = 1

          //  mob/user/123
          this.$postHttp('mob/user/merchant', data).then((data) => {
            if (data.code == 200) {
              this.$message({
                message: '审核成功',
                type: 'success'
              });
              this.agentpage.pageNo = 1;
              this.getAgentInfoList();

            }
          })
        }).catch(() => {
          this.$prompt('请输入拒绝原因', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({ value }) => {
            data.examineStatus = 2
            data.remark = value == null ? '' : value

            this.$postHttp('mob/user/merchant', data).then((data) => {
              if (data.code == 200) {
                this.$message({
                  message: '审核成功',
                  type: 'success'
                });
                this.agentpage.pageNo = 1;
                this.getAgentInfoList();

              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消审核'
            });
          });
        });
      }
    },
    delJJR() {
      this.$confirm("此操作将选择的经纪人删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.agentList.forEach((e) => {
            if (e.choose) {
              this.$postHttp("/mob/user/delAgent", { id: e.id }).then(
                (data) => {
                  if (data.code == 200) {
                    this.$message({
                      type: "success",
                      message: data.msg,
                    });
                    this.agentpage.pageNo = 1;
                    this.getAgentInfoList();
                  }
                }
              );
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;
        this.agentpage.shopId = user.shopId;
        this.housepage.shopId = user.shopId;
        this.imageUrl = user.image;
        this.getAgentInfoList();
      } else {
        this.loginstate = false;
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        this.$router.push("/");
      }
    },
    //查询该店铺下的经纪人
    getAgentInfoList() {
      this.$getHttp("/mob/user/getAgentInfoList", this.agentpage).then(
        (data) => {
          if (data.code == 200) {
            data.page.list.forEach((e) => {
              e.choose = false;
            });
            this.agentList = data.page.list;
            this.agenttotal = data.page.count;

            this.checkboxShow = false
            this.isShow = false
            this.isShowMark = false
            this.isShowDel = false
          }
        }
      );
    },
    //查询该经纪人下的房源
    getHouseInfo() {
      this.$getHttp("/mob/home/getHouseInfo", this.housepage).then((data) => {
        if (data.code == 200) {
          data.list.forEach((e) => {
            e.choose = false;
            if (e.hasOwnProperty("FLOOR")) {
              if (e.FLOOR.indexOf("|") == -1) {
                e.floor = ''
              } else {
                e.floor = e.FLOOR.split("|")[0] + "层/" + "共" + e.FLOOR.split("|")[1] + "层";
              }
            }
          });
          this.houseList = data.list;
          this.housetotal = data.count;
        }
      });
    },
    agentCurrentChange(e) {
      this.agentpage.pageNo = e;
      this.getAgentInfoList();
    },
    houseCurrentChange(e) {
      this.housepage.pageNo = e;
      this.getHouseInfo();
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋，共" + fool[1] + "层";
    },
    choosehouse(id) {
      console.log(id)
      this.agentList.forEach((e) => {
        if (e.id == id) {
          e.choose = !e.choose;
          this.curAgent = e
        } else {
          e.choose = false;
        }
      });
      this.isShows()
    },
    choosehouse2(id) {
      this.houseList.forEach((e) => {
        if (e.id == id) {
          e.choose = !e.choose;
        }
      });
    },
    choosehouse3(id) {
      this.fenpagentList.forEach((e) => {
        if (e.id == id) {
          e.choose = !e.choose;
        } else {
          e.choose = false;
        }
      });
    },
    selectColl(type) {
      this.houseList.forEach((e) => {
        e.choose = type;
      });
    },
    departure() {
      let arr = this.agentList.filter((item) => {
        return item.choose == true
      })
      if (this.user.id == arr[0].userId) {
        Message.error({
          message: "商家不能标记自己为离职",
          offset: "200",
          duration: 2000,
        });
        return
      }
      this.$confirm("此操作将选择的经纪人标记为离职, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.agentList.forEach((e) => {
            if (e.choose) {
              this.$postHttp("/mob/user/markResignation", { id: e.id }).then(
                (data) => {
                  if (data.code == 200) {
                    this.$message({
                      type: "success",
                      message: data.msg,
                    });
                    this.agentpage.pageNo = 1;
                    this.getAgentInfoList();
                  }
                }
              );
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消标记",
          });
        });
    },
    fenpei(item) {
      if (item.dutyStatus == 1) {
        Message.error({
          message: "在职，不可分配",
          offset: "200",
          duration: 2000,
        });
        return;
      }
      this.agent = JSON.parse(JSON.stringify(item));
      this.housepage.userId = item.userId;
      this.getHouseInfo();
      this.del = !this.del;
      // this.$router.push({
      //   path: "/login",
      //   query: {}
      // });
    },
    fenpeiren() {
      this.zbc = true;
      this.$getHttp("/mob/user/getAgentInfoList", {
        pageSize: 999,
        pageNo: 1,
        shopId: this.user.shopId,
        dutyStatus: 1,
      }).then((data) => {
        if (data.code == 200) {
          data.page.list.forEach((e) => {
            e.choose = false;
          });
          this.fenpagentList = data.page.list;
        }
      });
    },
    quxiao() {
      this.zbc = false;
    },
    queding() {
      let ids = "";
      let arr = [];
      this.fenpagentList.forEach((e) => {
        if (e.choose) {
          ids = e.userId;
        }
      });
      this.houseList.forEach((e) => {
        if (e.choose) {
          arr.push(e.id);
        }
      });
      if (ids != "") {
        this.$postHttp("/mob/user/updateHouseUserId", {
          idFind: String(arr),
          userId: ids,
        }).then((data) => {
          if (data.code == 200) {
            this.$message({
              type: "success",
              message: data.msg,
            });
            this.housepage.pageNo = 1;
            this.getHouseInfo();
            this.zbc = false;
          }
        });
      }
    },
    xuanClick(num) {
      this.xuan = num;
      switch (num) {
        case 1:
          this.$router.push({
            path: "/my/index",
          });
          break;
        case 3:
          this.$router.push({
            path: "/my/issue",
          });
          break;
        case 4:
          this.$router.push({
            path: "/my/collect",
          });
          break;
        case 5:
          this.$router.push({
            path: "/my/browsing",
          });
          break;
        case 6:
          this.$router.push({
            path: "/my/inform",
          });
          break;
        case 7:
          this.$router.push({
            path: "/my/broker",
          });
          break;
        case 8:
          this.$router.push({
            path: "/my/bbcz/bbczpersonal",
          });
          break;
        case 10:
          this.$router.push({
            path: "/my/instrument",
          });
          break;
      }
    },
    leibieClick(num) {
      this.leibie = num;
      this.housepage.pageNo = 1;
      switch (num) {
        case 0:
          delete this.housepage.newOld;
          delete this.housepage.transactionType;
          break;
        case 1:
          this.housepage.newOld = 2;
          this.housepage.transactionType = 2;
          break;
        case 2:
          this.housepage.newOld = 1;
          this.housepage.transactionType = 2;
          break;
        case 3:
          delete this.housepage.newOld;
          this.housepage.transactionType = 1;
          break;
      }
      this.getHouseInfo();
    },
    binaji() {
      this.checkboxShow = !this.checkboxShow;
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.zbc {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9;

  .fenpei {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 660px;
    height: 760px;
    background-color: #fff;

    .zbc_box {
      height: 625px;
      overflow-y: auto;

      .list {
        margin-top: 33px;
        margin-left: 32px;

        .li {
          position: relative;
          margin-bottom: 20px;

          .kuang {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            height: 127px;
            border-radius: 10px;
            border: 1px solid #e0e0e0;

            .touxiang {
              position: absolute;
              top: 28px;
              left: 40px;
              width: 76px;
              height: 76px;
            }

            .name {
              position: absolute;
              top: 35px;
              left: 148px;
              color: #333;
            }

            .pingjia {
              position: absolute;
              top: 71px;
              left: 148px;

              img {
                width: 25px;
                height: 25px;
              }
            }

            .biao,
            .biao1 {
              position: absolute;
              top: -1px;
              right: -1px;
              width: 83px;
              height: 38px;
              line-height: 38px;
              background: #64b6a8;
              border-radius: 0 10px 0 10px;
              color: #fff;
              text-align: center;
            }

            .biao1 {
              background: #666;
            }
          }
        }
      }
    }

    .but {
      width: 300px;
      height: 44px;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 40px;

      div {
        position: absolute;
        width: 120px;
        height: 42px;
        border: 1px solid #64b6a8;
        text-align: center;
        line-height: 42px;
        font-size: 19px;
        color: #64b6a8;
        border-radius: 22px;
        cursor: pointer;
      }

      .d1 {
        left: 0px;
      }

      .d2 {
        right: 0;
        background-color: #64b6a8;
        color: #fff;
      }
    }
  }
}

.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 940px;
  color: #333;
  border: 1px solid #e0e0e0;

  .li1 {
    position: relative;
    margin-bottom: 32px;

    .kuang {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      height: 127px;
      border-radius: 10px;
      border: 1px solid #e0e0e0;
      cursor: pointer;

      .touxiang {
        position: absolute;
        top: 28px;
        left: 40px;
        width: 76px;
        height: 76px;
      }

      .name {
        position: absolute;
        top: 35px;
        left: 148px;
        color: #333;
      }

      .pingjia {
        position: absolute;
        top: 71px;
        left: 148px;

        img {
          width: 25px;
          height: 25px;
        }
      }

      .biao,
      .biao1 {
        position: absolute;
        top: -1px;
        right: -1px;
        width: 83px;
        height: 38px;
        line-height: 38px;
        background: #64b6a8;
        border-radius: 0 10px 0 10px;
        color: #fff;
        text-align: center;
      }

      .biao1 {
        background: #666;
      }
    }
  }

  .leibie {
    position: relative;
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #e0e0e0;

    .anniu {
      position: absolute;
      left: 34px;
      bottom: 28px;

      div {
        display: inline-block;
        margin-right: 54px;
        font-size: 20px;
        cursor: pointer;
      }

      .xuan {
        transform: scale(1.2);
        color: #64b6a8;
      }
    }

    span {
      display: inline-block;
      position: absolute;
      width: 70px;
      height: 34px;
      background: #e0e0e0;
      border-radius: 22px;
      text-align: center;
      line-height: 34px;
      color: #333;
      top: 22px;
      right: 20px;
      cursor: pointer;
    }

    .fanhui {
      position: absolute;
      width: 70px;
      height: 34px;
      background: #e0e0e0;
      border-radius: 22px;
      text-align: center;
      line-height: 34px;
      color: #333;
      top: 22px;
      right: 20px;
      cursor: pointer;
    }
  }

  .list {
    margin-top: 33px;
    margin-left: 32px;

    .li {
      position: relative;
      margin-bottom: 32px;

      .kuang {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        height: 127px;
        border-radius: 10px;
        border: 1px solid #e0e0e0;
        cursor: pointer;

        .touxiang {
          position: absolute;
          top: 28px;
          left: 40px;
          width: 76px;
          height: 76px;
        }

        .name {
          position: absolute;
          top: 35px;
          left: 148px;
          color: #333;
        }

        .pingjia {
          position: absolute;
          top: 71px;
          left: 148px;

          img {
            width: 25px;
            height: 25px;
          }
        }

        .biao,
        .biao1,
        .biao2 {
          position: absolute;
          top: -1px;
          right: -1px;
          width: 83px;
          height: 38px;
          line-height: 38px;
          background: #64b6a8;
          border-radius: 0 10px 0 10px;
          color: #fff;
          text-align: center;
        }

        .biao1 {
          background: #666;
        }

        .biao2 {
          background: #cf9236;
        }
      }
    }

    .list2 {
      margin-top: 33px;
      margin-left: 32px;

      .li {
        position: relative;
        margin-bottom: 32px;

        .img {
          width: 230px;
          height: 154px;
        }

        .wenzi {
          display: inline-block;
          vertical-align: top;
          width: 350px;
          height: 154px;
          margin-left: 14px;

          .p1 {
            font-size: 20px;
            color: #333333;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .p2 {
            font-size: 14px;
            color: #666666;
            margin-top: 8px;
            margin-bottom: 8px;
          }

          .p3 {
            font-size: 14px;
            color: #666666;
          }

          .p4 {
            position: absolute;
            bottom: 0;

            img {
              width: 30px;
              height: 30px;
              cursor: pointer;
            }

            span {
              font-size: 14px;
              vertical-align: middle;
            }

            .gong {
              display: inline-block;
              width: 68px;
              height: 23px;
              background: #ffffff;
              border: 1px solid #64b6a8;
              border-radius: 4px;
              text-align: center;
              line-height: 23px;
              color: #64b6a8;
              margin-left: 10px;
              cursor: pointer;
            }
          }

          .p5 {
            position: absolute;
            bottom: 0;
            color: #666666;
          }

          .p6 {
            position: absolute;
            bottom: 0;

            span {
              font-size: 14px;
              display: block;
              margin-top: 10px;
            }
          }
        }

        .jiage {
          position: absolute;
          width: 110px;
          top: 45px;
          right: 24px;

          p {
            text-align: center;
          }

          .p1 {
            font-size: 26px;
            color: red;
          }

          .p2 {
            font-size: 12px;
            color: #333;
            margin-top: 10px;
          }
        }

        .el-checkbox {
          vertical-align: middle;
          margin-right: 20px;
        }

        /deep/.el-checkbox__inner {
          width: 34px;
          height: 34px;
          border-radius: 50%;
        }

        /deep/.el-checkbox__inner::after {
          border: 2px solid #fff;
          width: 8px;
          height: 18px;
          left: 11px;
          top: 4px;
          border-left: 0;
          border-top: 0;
        }

        /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
        /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
          background-color: #64b6a8;
          border-color: #64b6a8;
        }
      }
    }
  }

  .fenye {
    width: 100%;
    height: 50px;
    text-align: center;
    margin-bottom: 50px;
  }

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }

  .caozuo {
    position: relative;
    width: 100%;
    height: 90px;
    border-top: 1px solid #e0e0e0;

    .shan {
      position: absolute;
      font-size: 20px;
      color: #333;
      top: 30px;
      left: 55px;
    }

    .anniu {
      position: absolute;
      right: 24px;
      top: 24px;

      div {
        position: relative;
        display: inline-block;
        width: 120px;
        height: 42px;
        line-height: 42px;
        font-size: 19px;
        cursor: pointer;
        overflow: hidden;
        vertical-align: middle;

        /deep/.el-input__inner {
          border: 0;
          font-size: 20px;
          color: #64b6a8;
          padding: 0 15px;
          height: 42px;
        }
      }

      .d1 {
        color: #64b6a8;
        border: 1px solid #64b6a8;
        border-radius: 21px;
        text-align: center;
      }

      .d2 {
        color: #fff;
        border-radius: 21px;
        border: 1px solid #64b6a8;
        text-align: center;
        background-color: #64b6a8;
      }
    }
  }
}

.con1 {
  border: 0px solid #e0e0e0;

  .kuang1 {
    border: 1px solid #e0e0e0;
  }

  .kuang {
    cursor: initial !important;
  }

  .caozuo {
    width: 938px !important;
    border: 1px solid #e0e0e0 !important;
    border-top: 0px solid #e0e0e0 !important;

    .d2 {
      border: 0px !important;
    }
  }
}

.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;

  .geren {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }

    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }

    .list {
      position: relative;
      width: 100%;

      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }

    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;

  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        width: 60px;
        height: 60px;
      }

      span {
        vertical-align: middle;
      }
    }

    .rig {
      position: absolute;
      right: 0;

      .sousuo {
        position: relative;
        display: block;
        width: 380px;
        height: 50px;
        background: #ffffff;
        border-radius: 4px;
        font-size: 18px;
        overflow: hidden;
        display: inline-block;

        input {
          width: 300px;
          height: 55px;
          line-height: 55px;
          text-indent: 16px;
          font-size: 18px;
        }

        img {
          width: 25px;
          height: 25px;
          margin-left: 20px;
          cursor: pointer;
        }

        p {
          position: absolute;
          top: 0;
          right: 0;
          width: 80px;
          height: 55px;
          background-color: #64b6a8;
          text-align: center;
          line-height: 55px;
          font-size: 24px;
          cursor: pointer;
          color: #ffffff;
        }
      }

      .but {
        width: 200px;
        height: 50px;
        background: #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin-left: 30px;
      }
    }
  }
}

.el-radio {
  margin-right: 20px;
}

/deep/.el-radio__label {
  font-size: 0px;
}

/deep/.el-radio__inner {
  width: 34px;
  height: 34px;
}

/deep/.el-radio__input.is-checked .el-radio__inner {
  background-color: #64b6a8;
  border-color: #64b6a8;
}

/deep/.el-radio__inner::after {
  box-sizing: content-box;
  content: "";
  border: 2px solid #fff;
  position: absolute;
  transform: rotate(45deg) scaleY(1) !important;
  transition: transform 0.15s ease-in 0.05s;
  transform-origin: center;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0);
  width: 8px;
  height: 18px;
  left: 11px;
  top: 4px;
  border-left: 0;
  border-top: 0;
}

/deep/.el-radio__input.is-checked+.el-radio__label {
  color: #fff;
}

.el-checkbox {
  vertical-align: middle;
  margin-right: 20px;
}

/deep/.el-checkbox__inner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

/deep/.el-checkbox__inner::after {
  border: 2px solid #fff;
  width: 8px;
  height: 18px;
  left: 11px;
  top: 4px;
  border-left: 0;
  border-top: 0;
}

/deep/.el-checkbox__label {
  display: none;
}

/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
/deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #64b6a8;
  border-color: #64b6a8;
}
</style>